<template>
  <el-dialog
    title="处置"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="dialogTableVisible"
    @close="close"
  >
    <el-form class="form" ref="form" :model="formData">
      <el-form-item label="反馈账号：">
        <div>{{ formData.username }}</div>
      </el-form-item>
      <el-form-item label="反馈内容：">
        {{ formData.content }}
      </el-form-item>
      <el-form-item label="接收时间：">
        {{ formData.createTime }}
      </el-form-item>
      <el-form-item label="联系方式：">
        {{ formData.phone }}
      </el-form-item>
      <el-form-item
        prop="answer"
        :rules="[
          { required: true, message: '请填写回复内容', trigger: 'blur' },
        ]"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6 }"
          placeholder="快速回复"
          v-model="formData.answer"
        >
        </el-input>
      </el-form-item>
      <el-form-item class="active">
        <el-button @click="submit" :loading="loading">回复</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: null,
        content: null,
        createTime: null,
        phone: null,
        status: null,
        username: null,
        answer: null,
      },
      dialogTableVisible: false,
      loading: false,
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate().then(() => {
        this.loading = true;
        const form = new FormData();
        form.append(
          "content",
          `${this.formData.answer}#${this.formData.content}`
        );
        form.append("id", this.formData.id);
        form.append("recipient", this.formData.username);
        this.$http
          .post(`cgjybzMine/feedbackResponse`, form)
          .then((res) => {
            console.log(res);
            if (res.data.code !== 0) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.success("操作成功");
              this.close();
              this.$emit("submit");
            }
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    close() {
      this.formData = {
        id: null,
        content: null,
        createTime: null,
        phone: null,
        status: null,
        username: null,
        answer: null,
      };
      this.$refs["form"].clearValidate();
      this.dialogTableVisible = false;
      this.$emit("close");
    },
    show(id) {
      this.$http.get(`cgjybzMine/getFeedbackInfo?id=${id}`).then((res) => {
        this.formData = { ...res.data.data };
        this.dialogTableVisible = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  display: flex;
  justify-content: center;
}
.form {
  width: 70%;
}
::v-deep .active .el-form-item__content {
  display: flex;
  justify-content: flex-end;
}
</style>
